<template>
  <div>
    <el-form-item label="  家庭住址" style="text-indent:.8em">
      <el-select v-model="province" style="width:250px;margin-right: 20px" @change="changeProvince">
        <el-option  v-for="item in provinceObj" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="city" style="width:250px;margin-right: 20px" @change="changeCity">
        <el-option v-for="item in cityObj" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="county" style="width:250px" @change="changeCounty">
        <el-option v-for="item in countyObj" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import {getProvince, getCity, getCounty} from 'api/common/index'
export default {
  data () {
    return {
      province: '', // 省
      city: '', // 市
      county: '', // 区
      provinceObj: {}, // 省数组
      cityObj: {}, // 市数组
      countyObj: {}, // 区数组
      areaArr: []
    }
  },
  props: {
    area: Object,
    type: Number
  },
  created () {
    if (this.type === 2 && this.area.province) {
      this.province = this.area.province
      this.city = this.area.city
      this.county = this.area.county
      getProvince().then(data1 => {
        this.provinceObj = data1.data
        getCity({pid: this.province}).then(data2 => {
          this.cityObj = data2.data
          getCounty({pid: this.city}).then(data3 => {
            this.countyObj = data3.data
          })
        })
      })
    } else {
      this.province = ''
      this.city = ''
      this.county = ''
      this.getProvince()
    }
  },
  methods: {
    changeProvince () { // 省改变
      this.cityObj = {}
      this.countyObj = {}
      this.city = ''
      this.area.city = ''
      this.county = ''
      this.area.county = ''
      this.area.province = this.province
      this.getCity(this.province)
    },
    changeCity () { // 市改变
      if (!this.city) {
        return false
      }
      console.log('aaaa')
      this.countyObj = {}
      this.county = ''
      this.area.county = ''
      this.area.city = this.city
      this.getCounty(this.city)
    },
    changeCounty () { // 区改变
      this.area.county = this.county
    },
    getProvince () { // 获取省
      getProvince().then(v => {
        this.provinceObj = v.data
      })
    },
    getCity (e) { // 获取市
      getCity({'pid': e}).then(v => {
        this.cityObj = v.data
      })
    },
    getCounty (e) { // 获取区
      getCounty({'pid': e}).then(v => {
        this.countyObj = v.data
      })
    }
  }
}
</script>
<style scoped>
.paginate {
  margin-top: 10px;
}
</style>
